<template xmlns="">
    <div class="content-box">
        <draggable v-model="chatList" @start="onStart" @end="onEnd">
            <transition-group>
                <div class="user-item" v-for="item in chatList" :key="item.sort" @click="openChat(item.groupId)">
                    <img v-if="item.img" class="user-avatar" :src="item.img"
                         alt="author"/>
                    <img v-else class="user-avatar" src="@/assets/images/user/default-author.png" alt="author"/>
                    <div class="user-info">
                        <n-ellipsis style="max-width: 100%">
                            <span class="user-name">{{ item.name }}</span>
                            <template #tooltip>
                                <div style="text-align: center">
                                    {{ item.name }}
                                </div>
                            </template>
                        </n-ellipsis>
                        <span class="end-msg">
                            <n-ellipsis style="max-width: 100%">
                                {{ item.lastMsg }}
                                <template #tooltip>
                                    <div style="text-align: center">
                                     自己点开看
                                    </div>
                                </template>
                            </n-ellipsis>
                        </span>
                    </div>
                    <span class="user-time">2020年7月8日</span>
                </div>
            </transition-group>
        </draggable>
    </div>
</template>
<script setup lang="ts">
import useStore from "@/store";
import {GroupChatList} from "@/api/groupmsg/types";

const {user,chat} = useStore()
const chatList = ref([] as GroupChatList[])
const drag = ref(false)

const onStart = () => {
    drag.value = true;
}

const onEnd = () => {
    drag.value = false;
}

const openChat = (groupId: number) => {
    chat.chatType = 1;
}

onMounted(() => {
    chatList.value = chat.recentGroupList;
})
</script>

<style scoped lang="scss">

.content-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;

    .user-item {
        position: relative;
        width: 100%;
        padding: 0.1rem;
        border-radius: 0.1rem;
        box-shadow: 0 0 0.1rem var(--box-shadow);
        margin-top: 0.2rem;

        &:hover {
            box-shadow: inset 0 0 0.1rem var(--box-shadow-c);
        }

        .user-avatar {
            width: 0.8rem;
            height: 0.8rem;
            position: relative;
            top: 0.08rem;
        }

        .user-info {
            width: calc(100% - 2.5rem);
            height: 0.8rem;
            position: absolute;
            top: 0.1rem;
            left: 1.1rem;

            .user-name {
                font-weight: bold;
            }

            .end-msg {
                width: 100%;
                position: absolute;
                top: 0.4rem;
                left: 0;
            }
        }

        .user-time {
            width: 1.5rem;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 0.2rem;
        }
    }
}
</style>
